<template>
	<view class="battery">
		<view class="conver"></view>
	</view>
</template>

<script>
</script>

<style scoped>
	.battery{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 320px;
		background-color: white;
		border-radius: 5px 5px 5px 5px;
	}
	.battery::before{
		content: '';
		position: absolute;
		/* top: -20px; */
		left: 37%;
		width: 50px;
		height: 20px;
		background-color: white;
		border-radius: 5px 5px 5px 5px;
	}
	.battery::after{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: linear-gradient(to bottom, #18B998 0%, #18B998 44%, #18B998 100%);
		animation: charge 10s linear infinite;
		border-radius: 5px 5px 5px 5px;
	}
	@keyframes charge{
		0%{
			top: 100%;
			filter: hue-rotate(40deg);
		}
		95%{
			top: 5%;
			border-radius: 0px;
		}
		100%{
			top: 0%;
			border-radius: 15px 15px 0 0;
		}
	}
	.conver{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 15px 15px 5px 5px;
		z-index: 1;
		overflow: hidden;
	}
	.conver::before,
	.conver::after{
		content: '';
		position: absolute;
		left: -50%;
		width: 400px;
		height: 400px;
	}
	.conver::before{
		background-color: rgba(255,255,255,0.8);
		border-radius: 40% 30%;
		animation: rotate1 10s linear infinite;
	}
	.conver::after{
		background-color: rgba(255,255,255,0.7);
		border-radius: 42% 40%;
		animation: rotate2 10s linear infinite;
	}
	@keyframes rotate1{
		0%{
			transform: rotate(0deg);
			bottom: -8%;
		}
		100%{
			transform: rotate(360deg);
			bottom: 100%;
		}
	}
	@keyframes rotate2{
		0%{
			transform: rotate(45deg);
			bottom: -6%;
		}
		100%{
			transform: rotate(360deg);
			bottom: 95%;
		}
	}
</style>
